/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    RefreshControl,
    InteractionManager,
    ScrollView
} from 'react-native';
import GCStyle from '../../../Model/Global/GCStyle';
import GCComponent from '../../../Model/Global/GCComponent';
import {connect} from "react-redux";
import {GetMessageList} from "../../../Action/UserAction";
import Toast from "react-native-toast";

class NoticeMessage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
        };
    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch({type: 'Complete', D_MsgList_IsRefreshing: true});
            dispatch(GetMessageList(1,1));
        });
    }

    rowView(dataname, sectionID, rowID) {
        return (
            <View style={styles.rowCell}>
                <View style={{flexDirection: 'row', width: GCStyle.GCPubWidth - 20, height: 45, alignItems: 'center', justifyContent: 'space-between'}}>
                    <Text style={GCStyle.GCOrderCell.conterTxt}>{dataname.msg_title}</Text>
                    <Text style={{fontSize: 12, color: '#989898'}}>{dataname.add_time}</Text>
                </View>
                {GCComponent.lineAction(44, 0)}
                <Text style={[GCStyle.GCOrderCell.conterTxt, {fontWeight:'200',lineHeight:20,marginTop: 15, marginBottom: 15}]}>{dataname.msg_content}</Text>
            </View>
        );
    }


    onClickBack() {
        const {navigator} = this.props;
        if (navigator) {
            navigator.pop();
        }
    }

    render() {
        const {UserReducer} = this.props;
        console.log("D_MsgList",UserReducer.D_MsgList);
        return (
            <View style={styles.container}>
                <View style={GCStyle.Style.navigatorView}>
                    <TouchableOpacity onPress={() => this.onClickBack(0)}>
                        <Image resizeMode='contain' source={require('../../../Resource/Imgs/nav_backoff.png')} style={GCStyle.Style.LeftBn}/>
                    </TouchableOpacity>
                    <Text style={GCStyle.Style.titleTxt}>通知</Text>
                    <Text style={GCStyle.Style.rightBn}></Text>

                </View>
                {this.load()}
            </View>
        );
    }
    loadViewText() {
        const {UserReducer} = this.props;
        if (UserReducer.D_MsgList == null || UserReducer.D_MsgList == '') {
            if (UserReducer.D_MsgList_IsRefreshing) {
                return '正在加载';
            } else {
                return '暂无班次';
            }
        }
    }
    load(){
        const {UserReducer} = this.props;
        if (UserReducer.D_MsgList == null || UserReducer.D_MsgList == '') {
            return (
                <ScrollView showsVerticalScrollIndicator={false}
                            refreshControl={
                                <RefreshControl
                                    refreshing={UserReducer.D_MsgList_IsRefreshing}
                                    onRefresh={() => this.refreshData()}
                                />
                            }>
                    <View
                        style={{alignItems: 'center', marginTop: 100}}>
                        <Image resizeMode='contain'
                               source={require('../../../Resource/Imgs/results_image_error_order.png')}
                               style={[GCStyle.Style.loginIcon]}/>
                        <Text style={{color: '#bababa'}}>{this.loadViewText()}</Text>
                    </View>
                </ScrollView>
            );
        } else {
            return  <ListView
                refreshControl={
                    <RefreshControl
                        refreshing={UserReducer.D_MsgList_IsRefreshing}
                        onRefresh={this.refreshData.bind(this)}
                    />
                }
                dataSource={this.state.dataSource.cloneWithRows(UserReducer.D_MsgList)}
                renderRow={(dataname, sectionID, rowID) => this.rowView(dataname, sectionID, rowID)}
                enableEmptySections={true}
                onEndReachedThreshold={50}
                onEndReached={() => {
                    this.loadMoreData()
                }}
            />;
        }
    }
    refreshData() {
        const {dispatch} = this.props;
        dispatch({type: 'Complete', D_MsgList_IsRefreshing: true});
        dispatch(GetMessageList(0,1));
    }

    loadMoreData() {
        const {UserReducer, dispatch} = this.props;
        let inNext = UserReducer.D_MsgList_InNext;
        let page = UserReducer.D_MsgList_Page;
        if (inNext !== 0) {
            InteractionManager.runAfterInteractions(() => {
                dispatch(GetMessageList(0,Number(page)+1));
            });
        } else {
            if (Number(page) !== 1) {
                Toast.show('木有更多数据');
            }
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F4F4F4',
    },
    rowCell: {
        backgroundColor: 'white',
        marginBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,


    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
    },
});


export default connect((state) => {
    return {UserReducer} = state;
})(NoticeMessage);